<!DOCTYPE HTML>
<html>
<head>
	<meta charset = "utf-8" />
	<meta name = "format-detection" content = "telephone = no" />
	<meta name = "msapplication-tap-highlight" content = "no" />
	<meta name = "viewport" content="initial-scale=1, minimum-scale=1" />

	<link rel = "stylesheet" href = "css/index.css"/>
	<link rel = "stylesheet" href = "iconfont/iconfont.css"/>

	<script>
	if(location.protocol !== "file:" && document.domain !== "view-js.com" && document.domain !== "localhost"){
		location.href = location.protocol + "//view-js.com" + location.port + location.pathname + location.hash;
	}
	</script>

	<title>View.js</title>
</head>
<body>
	<div class = "content">
		<header><div class = "container">
			<div class = "logo"><img src = "asset/logo.svg"/><span>View.js</span></div>
			<a class = "github" href = "https://github.com/RedTeapot/Viewjs" target = "_blank"></a>
		</div></header>
		<div class = "banner"><div class = "container">
			<div class = "slogan">
				<span class = "emphasis">引入即用，无需构建</span>的单页应用框架
			</div>
			<div class = "icon">
				<span class = "html"></span>
				<span class = "css"></span>
				<span class = "js"></span>
			</div>
			<div class = "description">
				不需要 Router 配置，不需要构建，支持IE9
			</div>
		</div></div>
		<div class = "main"><div class = "container">
			<section class = "download">
				<div class = "title">下载</div>
				<div class = "content">
					<div class = "content-holder">
						<span class = "animation-wrapper"><a class = "latest-version"></a></span>
						<a class = "other-releases" href = "https://github.com/RedTeapot/Viewjs/tags" target = "_blank">其它版本</a>
					</div>
				</div>
			</section>
			<section class = "code-samples">
				<div class = "title">编写代码</div>
				<div class = "content">
					<div class = "code-sample">
						<div class = "code-sample-title">视图DOM骨架</div>
						<div class = "code-block">&lt;section data-view-id=&quot;page1&quot;&gt;
    &lt;header&gt;
        &lt;a class=&quot;nav-back&quot; data-view-rel=&quot;:back&quot;&gt;&lt;/a&gt;
        视图标题
    &lt;/header&gt;
    &lt;div class = &quot;body&quot;&gt;
        主内容区域
    &lt;/div&gt;
&lt;/section&gt;</div>
					</div>
					<div class = "code-sample">
						<div class = "code-sample-title">视图脚本</div>
						<div class = "code-block">;(function(){
    var viewId = "page1";
    var view = View.ofId(viewId);

    /* 视图进入 */
    view.on("enter", function(e){
        // do something
    });
})();</div>
					</div>
					<div class = "clear-float"></div>
					<div class = "description">视图，是View.js的核心概念，代表用户看到的一屏内容</div>
				</div>
			</section>
			<section class = "doc">
				<div class = "title">了解更多</div>
				<div class = "content">
					<div class = "navigation">
						<a href = "http://doc.view-js.com" target = "_blank"><div class = "wrapper">
							<span class = "title">文档</span>
							<span class = "desc">学习、掌握 View.js 的概念和特性</span>
						</div></a>
						<a href = "http://api.view-js.com" target = "_blank"><div class = "wrapper">
							<span class = "title">API</span>
							<span class = "desc">查找 API 的具体用法和注意事项</span>
						</div></a>
						<a href = "http://attr.view-js.com" target = "_blank"><div class = "wrapper">
							<span class = "title">属性</span>
							<span class = "desc">查找关联 DOM 属性的声明规则</span>
						</div></a>
						<a href = "demo.html" target = "_blank"><div class = "wrapper">
							<span class = "title">Demo</span>
							<span class = "desc">查看代码样例，了解View.js的其它用法</span>
						</div></a>
					</div>
				</div>
			</section>
		</div></div>
		<div class = "container copyright">
			作者：Billy，<a href = "mailto:wmjhappy_ok@126.com">wmjhappy_ok@126.com</a>，河南郑州
			<a href = "https://beian.miit.gov.cn/" target = "_blank">豫ICP备17036234号-2</a>
		</div>
	</div></div>

	<script src = "js/plugin/highlightjs/highlight.pack.js"></script>
	<script>
	// ;(function(){
	// 	var gitalk = new Gitalk({
	// 		clientID: '408f27eb84b2b896c507',
	// 		clientSecret: '0e5d4097e6817656f2b33d33139edc3e17733c3c',
	// 		repo: 'Viewjs',
	// 		owner: 'RedTeapot',
	// 		admin: ['RedTeapot'],
	// 		labels: ['GitTalk'],
	// 		id: md5(location.pathname),      // Ensure uniqueness and length less than 50
	// 		distractionFreeMode: false  // Facebook-like distraction free mode
	// 	});
	// 	gitalk.render(document.querySelector(".right .wrapper"));
	// })();

	;(function(){
		var version = "1.7.0";

		var latestVersionObj = document.querySelector(".latest-version");
		latestVersionObj.href = "dist/viewjs-" + version + ".zip";
		latestVersionObj.innerHTML = "view.js-v" + version;
	})();

	;document.addEventListener("DOMContentLoaded", function(){
		Array.prototype.forEach.call(document.querySelectorAll(".code-block"), hljs.highlightBlock);
	});
	</script>
</body>
</html>